<template>
  <div>
    <div ref="dragElement" class="m-setting-fix" :style="{ top: position.y + 'px', right: position.x + 'px' }" @mousedown="startDrag">
      <div class="item">
        <div class="item-child" @click="operator(1)">
          <el-icon size="30" color="#3698fd" style="margin-bottom: 8px"><brush /></el-icon>
          主题配置
        </div>
      </div>
    </div>
    <el-drawer v-model="drawer" title="主题配置" size="300px">
      <div class="theme-item">
        <label>导航栏布局</label>
        <el-select v-model="layout" placeholder="请选择" style="width: 150px" @change="(val) => changeSwitch('mode', val)">
          <el-option label="纵向" value="vertical"></el-option>
          <el-option label="横向" value="horizontal"></el-option>
          <el-option label="分栏" value="columns"></el-option>
        </el-select>
      </div>
      <div class="theme-item">
        <label>主题颜色</label>
        <el-color-picker v-model="primary" :predefine="predefineColor" @change="changePrimary" />
      </div>
      <div class="theme-item">
        <label>暗黑模式</label>
        <switch-dark></switch-dark>
      </div>
      <div class="theme-item">
        <label>灰色模式</label>
        <el-switch v-model="gray" @change="(val) => changeGrayWeak('gray', val)" />
      </div>
      <div class="theme-item">
        <label>色弱模式</label>
        <el-switch v-model="weak" @change="(val) => changeGrayWeak('weak', val)" />
      </div>
      <div class="theme-item">
        <label>标签栏</label>
        <el-switch v-model="showTag" @change="(val) => changeSwitch('showTag', val)" />
      </div>
      <div class="theme-item">
        <label>侧边栏 Logo</label>
        <el-switch v-model="showLogo" @change="(val) => changeSwitch('showLogo', val)" />
      </div>
      <div class="theme-item">
        <label>保持一个子菜单的展开</label>
        <el-switch v-model="uniqueOpened" @change="(val) => changeSwitch('uniqueOpened', val)" />
      </div>
      <div class="theme-item">
        <label>固定header</label>
        <el-switch v-model="fixedHeader" @change="(val) => changeSwitch('fixedHeader', val)" />
      </div>
    </el-drawer>
  </div>
</template>

<script lang="ts" setup>
  import { computed, ref, watch, onMounted, onUnmounted } from 'vue'
  import { ElMessage } from 'element-plus'
  import { openLoading, closeLoading } from '@/utils/element'
  import SwitchDark from '@/components/SwitchDark/index.vue'
  import { PRIMARY_COLOR } from '@/config/index'
  import { useSettingStore } from '@/store/modules/setting'

  const SettingStore = useSettingStore()
  const layout = ref(SettingStore.themeConfig.mode)
  const showTag = ref(SettingStore.themeConfig.showTag)
  const showLogo = ref(SettingStore.themeConfig.showLogo)
  const uniqueOpened = ref(SettingStore.themeConfig.uniqueOpened)
  const primary = ref(SettingStore.themeConfig.primary)
  const fixedHeader = ref(SettingStore.themeConfig.fixedHeader)
  const gray = ref(SettingStore.themeConfig.gray)
  const weak = ref(SettingStore.themeConfig.weak)

  // 拖拽相关状态
  const dragElement = ref<HTMLElement>()
  const position = ref({ x: 0, y: window.innerHeight / 2 })
  const isDragging = ref(false)
  const dragOffset = ref({ x: 0, y: 0 })
  const hasDragged = ref(false) // 标记是否发生了拖拽

  const drawer = computed({
    get() {
      return SettingStore.themeConfig.showSetting
    },
    set() {
      changeSwitch('showSetting', !SettingStore.themeConfig.showSetting)
    },
  })

  // 预定义主题颜色
  const predefineColor = ['#409EFF', '#1890ff', '#304156', '#212121', '#11a983', '#13c2c2', '#6959CD', '#f5222d']

  const operator = (type) => {
    if (hasDragged.value) {
      // 如果刚刚发生了拖拽，不触发点击事件
      hasDragged.value = false
      return
    }
    switch (type) {
      case 1:
        drawer.value = true
        return
    }
  }

  // 开始拖拽
  const startDrag = (e: MouseEvent) => {
    e.preventDefault()
    isDragging.value = true
    hasDragged.value = false // 重置拖拽标记
    const rect = dragElement.value!.getBoundingClientRect()
    const startY = e.clientY // 记录初始位置
    dragOffset.value = {
      x: 0, // x轴偏移设为0，
      y: e.clientY - rect.top,
    }
    // 定义拖拽处理函数
    const handleMouseMove = (moveEvent: MouseEvent) => {
      // 如果鼠标移动距离超过阈值，认为是拖拽而不是点击
      if (Math.abs(moveEvent.clientY - startY) > 3) {
        hasDragged.value = true
      }
      onDrag(moveEvent)
    }

    const handleMouseUp = () => {
      stopDrag()
      document.removeEventListener('mousemove', handleMouseMove)
      document.removeEventListener('mouseup', handleMouseUp)
    }

    document.addEventListener('mousemove', handleMouseMove)
    document.addEventListener('mouseup', handleMouseUp)

    // 添加拖拽样式
    if (dragElement.value) {
      dragElement.value.style.cursor = 'grabbing'
      dragElement.value.style.userSelect = 'none'
    }
  }

  // 拖拽中
  const onDrag = (e: MouseEvent) => {
    if (!isDragging.value) return

    // 只允许垂直移动，水平位置保持不变
    let newY = e.clientY - dragOffset.value.y

    // 边界检查 - 只检查垂直边界
    const elementHeight = dragElement.value?.offsetHeight || 80

    // 限制在视窗垂直范围内
    newY = Math.max(0, Math.min(newY, window.innerHeight - elementHeight))

    // 只更新y坐标，x坐标保持为0（贴右边）
    position.value = { x: 0, y: newY }
  }

  // 停止拖拽
  const stopDrag = () => {
    isDragging.value = false

    // 移除拖拽样式
    if (dragElement.value) {
      dragElement.value.style.cursor = 'grab'
      dragElement.value.style.userSelect = 'auto'
    }
  }

  // 窗口大小改变时调整位置
  const handleResize = () => {
    const elementHeight = dragElement.value?.offsetHeight || 80

    // 只需要检查垂直边界，水平位置始终贴右边
    position.value.y = Math.min(position.value.y, window.innerHeight - elementHeight)
  }

  onMounted(() => {
    window.addEventListener('resize', handleResize)
  })

  onUnmounted(() => {
    window.removeEventListener('resize', handleResize)
  })

  // 进行配置
  const changeSwitch = (key, val) => {
    SettingStore.setThemeConfig({ key, val })
    if (key === 'mode') {
      openLoading()
      setTimeout(() => {
        closeLoading()
      }, 600)
    }
  }

  // 监听布局变化
  watch(
    () => layout.value,
    () => {
      const body = document.body as HTMLElement
      body.setAttribute('class', `layout-${layout.value}`)
    },
    { immediate: true },
  )

  // 修改主题颜色
  const changePrimary = (val) => {
    if (!val) {
      primary.value = val = PRIMARY_COLOR
      ElMessage({ type: 'success', message: `主题颜色已重置为 ${PRIMARY_COLOR}` })
    }
    document.documentElement.style.setProperty('--el-color-primary', val)
    changeSwitch('primary', val)
  }

  // 修改灰色模式
  const changeGrayWeak = (type, val) => {
    const body = document.documentElement as HTMLElement
    if (!val) return body.setAttribute('style', '')
    if (type === 'gray') body.setAttribute('style', 'filter: grayscale(1)')
    if (type === 'weak') body.setAttribute('style', 'filter: invert(80%)')
    changeSwitch(type, val)
  }
</script>

<style lang="scss" scoped>
  :deep(.el-drawer__header) {
    border-bottom: 1px solid #ebeef5;
    padding: 15px 20px 14px;
    margin-bottom: 0;
  }
  .m-setting-fix {
    position: fixed;
    z-index: 999;
    padding: 10px 0 0 0;
    margin: 0;
    text-align: center;
    cursor: grab;
    background: #fff;
    border: 1px solid #dcdfe6;
    border-top-left-radius: 5.5px;
    border-bottom-left-radius: 5.5px;
    box-shadow: 0 0 50px 0 rgb(82 63 105 / 15%);
    user-select: none;
    transition: box-shadow 0.2s ease, transform 0.1s ease;

    &:hover {
      box-shadow: 0 0 50px 0 rgb(82 63 105 / 25%);
      transform: translateX(-2px); // 轻微向左移动提示可拖拽
    }

    &:active {
      cursor: grabbing;
      transform: translateX(-4px) scale(1.02); // 拖拽时的反馈
    }
    .item {
      display: flex;
      flex-direction: column;
      align-items: center;

      justify-content: center;
      padding: 0 8px 10px 10px;
      margin: 0;
      list-style: none;
    }
    .item-child {
      color: #3698fd;
      width: 60px;
      height: 60px;
      /*padding-top: 10px;*/
      text-align: center;
      display: flex;
      flex-direction: column;
      background: #f6f8f9;
      align-items: center;
      justify-content: center;
      border-radius: 5.5px;
      font-size: 12px;
      background: #ebf5ff;
      transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    }
    .item-child2 {
      margin-top: 10px;
      color: #b37feb;
      background: #f7f2fd;
      transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    }
  }

  :deep(.el-drawer__title) {
    font-weight: bold;
    color: black;
  }
  .theme-item {
    width: 100%;
    display: flex;
    margin-bottom: 15px;
    align-items: center;
    font-size: 14px;
    color: black;
    justify-content: space-between;
  }
</style>
